<template>
	<div class="video_clip_handle">
		<div class="video">
			<template v-if="!!videoPath">
				<video :src="videoPath" controls></video>
			</template>
			<template v-else>
				<el-empty description="暂无视频进行编辑，请选择需要编辑的视频" :image-size="100"></el-empty>
			</template>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			videoPath: ''
		};
	},
	watch: {
		async data(data) {
			this.videoPath = window.staticPath + (await this.getFileUrl(data.id));
		}
	},
	methods: {
		...mapActions(['getFileUrl'])
	}
};
</script>

<style lang="scss" scoped>
.video_clip_handle {
	flex: 1;
	overflow: hidden;
	.video {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		background-color: #000;
		video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.el-empty {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: 0;
			opacity: 0.5;
			transform: translate(-50%, -50%);
			color: #909399;
		}
	}
}
</style>
